<template>
  <div>
    <!--用户头像-->
    <div class="personal">
      <van-icon class="message" name="chat-o" size="20px" />
      <span v-show="!showme">
        <van-row type="flex" gutter="10px" align="center" style="height: 250px">
          <van-col span="6" offset="1">
            <van-image
              round
              width="80px"
              height="80px"
              :src="tokend ? userInfo.avatarUrl : ''"
            />
          </van-col>
          <h2 @click="login">
            {{ tokend ? userInfo.username : "点击登录" }}
          </h2>
        </van-row>
      </span>
    </div>
    <!-- 代付款 -->
    <div>
      <h3 style="font-size: 20px">我的服务</h3>
      <van-grid>
        <van-grid-item replace to="/money" icon="balance-pay" text="我的钱包" />
        <van-grid-item replace to="/address" icon="guide-o" text="收货地址" />
        <!--  <van-grid-item icon="cross"  text="退出登录" v-show="show" @click="signOut"/> -->
      </van-grid>
    </div>
    <!-- 常用工具 -->
    <div>
      <h3 style="font-size: 20px">常用工具</h3>
      <van-grid>
        <van-grid-item icon="after-sale" text="待付款" />
        <van-grid-item icon="logistics" text="待发货" />
        <van-grid-item icon="description" text="待评价" />
        <van-grid-item icon="close" text="退出登录" @click="forword" style="color:red" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Notify } from "vant";
export default {
  name: "Personal",
  data() {
    return {
      userInfo: {},
      showme: false,
    };
  },
  computed: {
    ...mapState({ userList: (state) => state.user.userInfo }),
    tokend(){
      return localStorage.getItem('TOKEN')
    }
  },
  mounted() {
    localStorage.setItem("flag", 1);
    if (localStorage.getItem("flag")) {
      this.userInfo = this.userList;
    }

  },
  methods: {
    login() {
      let token = localStorage.getItem("TOKEN");
      if (token) {
        return 
      }else{
        this.$router.push("/login");
      }
      
    },
    forword() {
      let token =  localStorage.getItem("TOKEN");
      if(!token) return
      localStorage.removeItem("userInfo");
      localStorage.removeItem("TOKEN");
      this.userInfo = {}
      Notify({ type: "primary", message: "退出成功" });
       this.$router.push("/home");
    }
    //     signOut(){
    //         Notify({ type: 'primary', message: '退出成功' });
    //         this.show = false,
    //         localStorage.removeItem('userInfo');
    //         localStorage.removeItem('flag');
    //         this.$router.push("/Home")
    //       },
  },

};
</script>

<style scoped>
.message {
  float: right;
  margin-right: 15px;
  margin-top: 20px;
}
.personal {
  width: 100%;
  height: 100%;
  background-image: url("./images/20150604051845781.jpg");
}
h2 {
  color: black;
  font-size: 23px;
}
h3 {
  margin-left: 15px;
}
</style>